import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input, Table, Card,Modal,Checkbox,message,Pagination} from 'antd'
import {materialquery,contentQuery,recommandAdd,recommanddelete,recommandsort} from 'actions/common'
import '../../style/home.less'
import {setAdQueryInfo,setAdOkFetch} from 'actions/moduleManage'
import Uploadimg from '../../components/uploadimg'
import '../../style/userControl.less'
//abc
const Search = Input.Search;
const FormItem = Form.Item
@Form.create({})

@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",
      contentlist:"",
      visible:false,
      checkarr:[],
      pagecurrent:1,//当前页码
      total:0,
      setAdflag:false,
      loadingCover:false,
      imageflag:false,//封面裁剪框
      imageflagLogo:false,//logo裁剪框
      Adinfo:'',//广告位详情
    }
    this.type=["新增视频","行业要闻","新增大咖","新增大咖","新增专题","新增大咖","新增大咖"];
    this.checkboxarr=[];
    this.keyword={"contentTitle":"",};//搜索关键词
    this.pagesize = 6;//每页条数
  }
  componentDidMount() {
    this.init();
  }
  init(){
    this.props.dispatch(materialquery(this.props.params,(respose) => {
      this.setState({
        list: respose.respData,
      })
    }))
  }
  
  handleOk(){
    let contentId="";
    let contentType="";
    let list=this.state.contentlist.resultData;
    for(var i=0;i<list.length;i++){
      if(this.state.checkarr[i]){
        contentId+=list[i].id+",";
        contentType=list[i].type
      }
    }
    this.props.dispatch(recommandAdd({ contentId: contentId,contentType:this.props.params.contentType}, (respose) => {
      this.init();
      this.setState({
        visible: false,
        pagecurrent:1
      });
    }))
  }

  handleCancel(){
    this.setState({
      visible: false,
      pagecurrent:1
    });
  }

  onChange(value,obj){
    this.checkboxarr[value]=obj.target.checked
    this.setState({
      checkarr:this.checkboxarr
    });
  }

  showdialog(){//显示弹框
    this.checkboxarr=[];
    this.keyword = {"contentTitle":''};
    this.selectList()
  }
  
  dellistFn(id,contentType,i){//删除推荐
    this.props.dispatch(recommanddelete({contentType:contentType,id:id}, (respose) => {
      let list=this.state.list;
      list.resultData.list.splice(i,1);
      this.setState({
        list: list
      });
      
    }))
  }
  sortlistFn(id,contentType,i){//推荐排序
    this.props.dispatch(recommandsort({contentType:contentType,contentId:id}, (respose) => {
      this.init();
    }))
  }
  adCancel(){//广告位关闭
    this.setState({
      setAdflag: false,
    });
  }
  setAdFn(id,contentType){//设置广告位图片
    this.props.dispatch(setAdQueryInfo({"contentType":contentType,"contentId":id}, (respose) => {
      this.setState({
        setAdflag: true,
        Adinfo:respose.respData
      });
    }))
  }
  setAdOk(){//设置广告位确定按钮
    const datajson = Object.assign(this.state.Adinfo,{"contentTitle":this.props.form.getFieldValue('contentTitle')});
    this.props.dispatch(setAdOkFetch(this.state.Adinfo, (respose) => {
      message.success(respose.respMsg);
      this.init();
      this.setState({
        setAdflag: false,
      });
    }))
  }
  selectList(pageNumber){//查询弹窗数据列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword,this.props.params);
    this.props.dispatch(contentQuery(datajson, (respose) => {
      this.checkboxarr=[];
      // if(respose.respData.resultData.length==0){
      //   message.error("没有数据");
      //   return;
      // }
      for(var i=0;i<respose.respData.resultData.length;i++){
        this.checkboxarr.push(false)
      }
      this.setState({
        contentlist: respose.respData,
        visible: true,
        checkarr:this.checkboxarr,
        total:respose.respData.count,
        pagecurrent:pageNumber||1
      });      
    }))
  }
  imageuploaded() {
    this.setState({
      imageflag:true
    });
  }
  closeFn(){
    this.setState({
      imageflag:false
    });
  }
  urlFn(url){
    const datajson = Object.assign(this.state.Adinfo,{});
    datajson.imageAddr=url;
    this.setState({
        loadingCover: false,
        imageflag:false,
    })
    this.setState(datajson)
  }
  searchData(vaule){//搜索内容
    this.keyword = {"contentTitle":vaule};
    this.selectList(1);
  }

  render () {
    const { Meta } = Card;
    const { getFieldDecorator } = this.props.form;
    const CheckboxGroup = Checkbox.Group;
    const typeName=this.state.list.resultData?this.state.list.resultData.typeName:'';
    const module=this.state.list.resultData?this.state.list.resultData.module:'';
    const limitNum=this.state.list.resultData?this.state.list.resultData.limitNum:'';//数量限制
    const materiallist=this.state.list.resultData?this.state.list.resultData.list:[];//获取推荐内容
    const contentlist=this.state.contentlist.resultData?this.state.contentlist.resultData:[];//获取素材信息
    const formItemLayout = {
      labelCol: {
      //   xs: { span: 24},
          sm: { span: 4 },
      },
      wrapperCol: {
      //   xs: { span: 24 },
          sm: { span: 20 },
      },
    };
    return (
      <div className="page" style={{padding:'0'}}>
        { 
          materiallist.length >=limitNum ?'':
          <Button type="primary"  onClick={this.showdialog.bind(this)}style={{width:'150px',margin: '15px' }}>新增{typeName}</Button>
        }
        
        <div className="homeWrap">
          <div className="clearfix">
            <div className="hometitle">广告位名称：{typeName}</div>
            <div className="hometitle">广告位所属模块：{module}</div>
          </div>

          <div className="home-AD" style={{ background: '#ECECEC', padding: '15px' }}>
            {
              materiallist.map((materiallist,i)=> {
                return(
                  <Card
                      key={i}
                      style={{ width: 240 }}
                      cover={<img src={materiallist.imageAddr} />}
                    >
                    <Meta
                      title={materiallist.title}
                    />
                  <span onClick={this.dellistFn.bind(this,materiallist.id,this.state.list.resultData.type,i)} style={{marginRight:"5px",marginTop:"10px",display:"inline-block"}}>删除</span>
                  <span onClick={this.sortlistFn.bind(this,materiallist.id,this.state.list.resultData.type,i)} style={{marginRight:"5px",marginTop:"10px",display:"inline-block"}}>置顶</span>
                  <span onClick={this.setAdFn.bind(this,materiallist.id,this.state.list.resultData.type,i)} style={{marginRight:"5px",marginTop:"10px",display:"inline-block"}}>设置</span>
                </Card>
                )
              })
            }
          </div>
        </div>
        {/*添加数据弹窗 */}
        {
          this.state.visible?
          <Modal
            title={"新增"+typeName}
            visible={this.state.visible}
            onOk={this.handleOk.bind(this)}
            width={600}
            okText="添加"
            onCancel={this.handleCancel.bind(this)}
          >
            <div style={{marginBottom:'10px'}}>
              <Search
                placeholder="请输入关键字"
                enterButton="搜索"
                size="large"
                onSearch={this.searchData.bind(this)}
              />
            </div>
            {
              contentlist.length != 0?
                <div>
                  <div className="home-dialog-AD" style={{ background: '#ECECEC', padding: '15px' }}>
                  {
                    contentlist.map((contentlist,i)=> {
                      return(
                        <Card
                            key={i}
                            style={{ width:155}}
                            extra={<Checkbox onChange={this.onChange.bind(this,i)} checked={this.state.checkarr[i]}></Checkbox>}
                            cover={<img src={contentlist.imageAddr} />}
                          >
                          <Meta
                            title={contentlist.title}
                            description={contentlist.createTime}
                          />
                      </Card>
                      )
                    })                
                  }
                </div>
                <div style={{marginTop:'10px'}}>
                  <Pagination current={this.state.pagecurrent} pageSize={6} total={this.state.total} onChange={this.selectList.bind(this)}/>
                </div>
              </div>:
              <div style={{textAlign:'center',height:'200px','lineHeight':'200px'}}>暂无数据</div>
            }
            
          </Modal>:''
        }
        {this.state.setAdflag?
          <Modal
            title='设置广告位'
            visible={this.state.setAdflag}
            onOk={this.setAdOk.bind(this)}
            width={600}
            onCancel={this.adCancel.bind(this)}
          >
          <Form>
              <FormItem label="引用类型" {...formItemLayout}>
                {
                  <div>{this.state.Adinfo.contentTypeName}</div>
                }                 
              </FormItem>
              <FormItem label="引用标题" {...formItemLayout}>
                {
                  
                  <div>{this.state.Adinfo.originalTitle}</div>
                    
                }                 
              </FormItem>
              <FormItem label="显示标题" {...formItemLayout}>
                {
                  getFieldDecorator('contentTitle', {initialValue:this.state.Adinfo.contentTitle,
                  rules: [{
                      required: true,message:"默认为引用的标题"
                    }],
                  })(
                    <Input placeholder="请输入关键字"  size="default" style={{ width: '200px' }} />
                  )
                }
              </FormItem>
              <FormItem label="显示图片" {...formItemLayout}>
                <Spin spinning={this.state.loadingCover} style={{width:"180px"}}>
                  <img onClick={this.imageuploaded.bind(this)} style={{width:"180px",verticalAlign:"bottom",marginRight:"10px"}} 
                      src={ this.state.Adinfo.imageAddr ? this.state.Adinfo.imageAddr :require('../../images/baseImg.png') }
                  />
                </Spin>
                {
                  this.state.imageflag?
                  <Uploadimg width={450} height={225.6} visible={this.state.imageflag} closeModal={this.closeFn.bind(this)} urlFn={this.urlFn.bind(this)}/>
                  :''
                }
            </FormItem>
            </Form>
          </Modal>
          :""}
      </div>
    )

  }
}


